<template>
  <RjModal
    class="init-pwd-modal"
    width="360px"
    :header="null"
    :footer="null"
    :closable="false"
    :visible="isVisible"
  >
    <h3 class="init-pwd-title">
      <icon-font type="ic-safe2" />
      {{ $t('account.editPwd') }}
    </h3>
    <div class="init-pwd-tip">
      {{ $t('account.pwdInitTip') }}
    </div>
    <PasswordIntl @savePwdSuccess="savePwdSuccess" :isInit="true" />
  </RjModal>
</template>
<script>
import { requestHttp, maccApi } from '@utils/index';
import PasswordIntl from '@views/system/usercenter/components/passwordIntl.vue';
export default {
  name: 'initPasswordModal',
  data() {
    return {
      isVisible: false,
    };
  },
  components: {
    PasswordIntl,
  },
  created() {
    this.getPassWordSuggest();
  },
  methods: {
    // 获取密码相关建议
    async getPassWordSuggest() {
      const res = await requestHttp({
        api: maccApi.ACCOUNT_INIT_GET_API,
        method: 'GET',
      });
      if (res.data.needChangePwd) {
        this.isVisible = true;
      }
    },

    savePwdSuccess() {
      this.isVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.init-pwd-title {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  i {
    font-size: 22px;
    color: @success-color;
  }
}
.init-pwd-tip {
  margin-bottom: 16px;
}
</style>
